<!-- 第三种单选按钮样式 -->
<template>
    <div class="yd-radio3">
        <div class="item" :class="{ 'active': item[valueKey] == tVal }" v-for="(item, index) in list" :key="index" @click="handleChange(item)">
            <template v-if="!$scopedSlots.default">{{ item[labelKey] }}</template>
            <slot v-else v-bind="item"></slot>
        </div>
    </div>
</template>
<script>
export default {
    model: {
        prop: 'value',
        event: 'change'
    },
    props: {
        value: {
            type: [String, Number],
            default: ''
        },
        list: {
            type: Array,
            default: () => []
        },
        labelKey: {
            type: String,
            default: 'label'
        },
        valueKey: {
            type: String,
            default: 'value'
        }
    },
    data() {
        return {
            
        };
    },
    computed: {
        tVal: {
            get() {
                return this.value;
            },
            set(val) {
                this.$emit('change', val);
            }
        },
    },
    methods: {
        handleChange(item) {
            this.tVal = item[this.valueKey];
        }
    }
};
</script>
<style scoped lang='scss'>
.yd-radio3 {
    width: auto;
    height: 36px;
    background: var(--color-F7F8FA-1F1F1F);
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 0 8px;
    padding: 0 4px;
    box-sizing: border-box;

    .item {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 16px;
        color: var(--color-3B3C3D-B8B8B8);
        border: 1px solid transparent;
        padding: 0 8px;
        height: 28px;
        border-radius: 4px;
        position: relative;
        cursor: pointer;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        &:after {
            content: '';
            position: absolute;
            right: -6px;
            top: 50%;
            transform: translateY(-50%);
            background: var(--color-E4E5E6-515152);
            width: 1px;
            height: 14px;
        }
    }

    .item:last-child:after {
        display: none;
    }


    .active {
        border-color: var(--color-1466CF-1466CF);
        background: var(--color-2979FF-0D6AFF);
        color: var(--color-FFFFFF-FFFFFF_80);
        box-sizing: border-box;
    }
}
</style>